<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Form with Addition CAPTCHA</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .error-message {
            color: red;
            margin-top: 10px;
        }

        .success-message {
            color: green;
            margin-top: 10px;
        }

        body,
        form {
            width: 100%;
            border: none;
            margin: 0;
            padding: 0;
        }

        .main-from {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .item {
            width: 48%;
            line-height: 36px;
        }

        .item input {
            border: 1px silver solid;
        }

        .item-yz { display: flex;
            flex-wrap: flex nowrap;
        }
        .item-yz * { margin: 0 20px;}
        .item-yz input[type=text] {
            max-width: 156px;
            border: silver 1px solid;
        }

        #sub_txt {
            width: 100%;
        }

        button,
        input,
        select,
        textarea {
            font-size: 100%;
            vertical-align: baseline;
            width: 100%;
        }

        button,
        input {
            line-height: normal
        }

        button,
        html input[type=button],
        input[type=reset],
        input[type=submit] {
            border-radius: 10px;
            border: 0;
            background: #215DB8;
            cursor: pointer;
            -webkit-appearance: button;
            color: #FFF
        }

        button:active,
        button:focus,
        button:hover,
        html input[type=button]:active,
        html input[type=button]:focus,
        html input[type=button]:hover,
        input[type=reset]:active,
        input[type=reset]:focus,
        input[type=reset]:hover,
        input[type=submit]:active,
        input[type=submit]:focus,
        input[type=submit]:hover {
            background: #025099
        }

        .button {
            padding: 10px 20px;
            cursor: pointer;
        }


        button::-moz-focus-inner,
        input::-moz-focus-inner {
            border: 0;
            padding: 0
        }

        input[type=text],
        input[type=email],
        input[type=url],
        input[type=password],
        input[type=tel],
        input[type=search],
        textarea {
            background: #fff;
            color: #666;
            border-radius: 3px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        input[type=text]:focus,
        input[type=email]:focus,
        input[type=url]:focus,
        input[type=password]:focus,
        input[type=tel]:focus,
        input[type=search]:focus,
        textarea:focus {
            color: #111;
            background: #FFF
        }

        input[type=file] {
            max-width: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }


        .contact_form input::-webkit-input-placeholder,
        .contact_form textarea::-webkit-input-placeholder,
        .contact_form input::-moz-placeholder,
        .contact_form input:-moz-placeholder,
        .contact_form input:-ms-input-placeholder {
            color: #0d0000;
        }
    </style>

</head>

<body>


    <form id="lyform" name="form" onsubmit="return check(this)">
        <div class="main-from">
            <div class="item">
                <input type="text" maxlength="25" name="name" class="fl" placeholder="Your Name">
            </div>

            <div class="item">
                <input type="text" maxlength="25" name="email" class="fr" placeholder="Your E-mail(*)">
            </div>
            <div class="item">
                <input type="text" maxlength="20" name="phone" class="fl" placeholder="Your WhatsApp">
            </div>
            <!--    <div class="item">
        <input type="text" name="country" class="fr" placeholder="Your Country/Region" />
       </div> -->
            <div class="item">
                <input type="text" maxlength="25" name="company" class="fl" placeholder="Your Company">
            </div>
            <!--        <div class="item">
        <input type="text" name="capacity" class="fr" placeholder="Capacity" />
       </div> -->

            <div id="sub_txt" class="item">
                <textarea name="content" cols="40" rows="10" maxlength="500" aria-required="true" aria-invalid="false"
                    placeholder="Your Message: (*)Tips,Please tell us your detailed needs, such as machine names, capacities, etc."></textarea>
            </div>

        </div>
        <!-- <mainform> -->
        <div class="item-yz">
            <div><span id="num1"></span> + <span id="num2"></span> = ? </div>
            <input type="text" id="captchaInput" placeholder="verification code" required>
        </div>

        <div class="error-message" id="errorMessage"></div>
        <div class="success-message" id="successMessage"></div>



        <div class="form-submit">
            <button type="button" id="submitButton">提交</button>
        </div>
        <div class="item-s"> <input type="radio" name=" " checked="checked"> <span class="wpcf7-list-item-label">We
                value your privacy.I have read and agree to the YunDa <a href="/privacy-policy/">Privacy Policy *.</a>
                (Don't write websites and link.)</span>
        </div>
        <input type="hidden" name="lang" value="en">
        <input type="hidden" name="ip" value=" ">
        <input type="hidden" name="fdtitle" value=" ">
        <input type="hidden" name="id" value="6liuyan">

    </form>



    <script>
        $(document).ready(function () {
            // 生成两个随机数用于验证码
            var num1 = Math.floor(Math.random() * 10);
            var num2 = Math.floor(Math.random() * 10);
            $('#num1').text(num1);
            $('#num2').text(num2);

            $('#submitButton').on('click', function () {
                // 执行验证
                var isValid = validateForm(num1, num2);


                if (isValid) {
                    // 如果验证成功，隐藏错误消息
                    $('#errorMessage').text('');
                    // 执行 AJAX 请求

                    $.ajax({
                        url: "submit.php",
                        type: "POST",
                        data: $('#lyform').serialize(),
                        success: function (data) {

                            $('#successMessage').html(data);
                        },
                        error: function (data) {
                            $('#errorMessage').html('Error: ' + error);
                        }
                    });

                } else {
                    // 如果验证失败，显示错误消息并清空成功消息
                    $('#errorMessage').text('The verification failed. Please try again.').show();
                    $('#successMessage').hide();
                }
            });

            function validateForm(num1, num2) {
                var captchaInput = $('#captchaInput').val();
                var correctResult = num1 + num2;

                // 检查验证码字段是否为空
                if (captchaInput === '') {
                    // 验证失败
                    return false;
                }

                // 验证验证码输入是否正确
                if (parseInt(captchaInput) !== correctResult) {
                    // 验证失败
                    return false;
                }

                // 验证成功
                return true;
            }





        });
    </script>

</body>

</html>